<template>
	<view :class="[primarySize()]">
		<view class="page-foot bg-white">
			<view class="ptb10 plr30" @click="bindSubmit()">
				<view class="btn1">保存信息</view>
			</view>
		</view>
		<view class="container">
				<view class="ptb20 plr30">
					<view class="box1">
						<view class="inp_item flex-box">
							<view class="left">姓名</view>
							<input type="text" placeholder="请输入" v-model="formData.username" class="flex-grow-1 inp" placeholder-class="colb" />
						</view>
						<view class="inp_item flex-box">
							<view class="left flex-grow-1">性别</view>
							<view class="switch ml40" :class="item.id==formData.gender?'ac':''" @click="bindGenderChange(item.id)" v-for="(item,index) in genders">{{item.name}}</view>
						</view>
						<view class="inp_item flex-box">
							<view class="left">手机号</view>
							<input type="number" maxlength="11" placeholder="请输入" v-model="formData.mobile" class="flex-grow-1 inp" placeholder-class="colb" />
						</view>
						<view class="inp_item flex-box">
							<view class="left">身份证号</view>
							<input type="idcard" maxlength="18" placeholder="请输入" v-model="formData.idcard" class="flex-grow-1 inp" placeholder-class="colb" />
						</view>
					<view class="inp_item">
						<multi-select :items="areas" @change="bindDistrictsChange" id_key="id" name_key="name" max_level="3" :value="formData.district_id">
							<view class="inp_item flex-box">
								<view class="left flex-grow-1 pr30">所在区/县</view>
								<view class="fs30" :class="[!areaName?'colb':'col3']">{{areaName?areaName:'请选择'}}</view>
							</view>
						</multi-select>
					</view>
						
						<view class="inp_item flex-box">
							<view class="left">详细地址</view>
							<input type="text" placeholder="请输入" v-model="formData.address" class="flex-grow-1 inp" placeholder-class="colb" />
						</view>
					</view>
					<view class="mt35 tc col9 fs24">提交信息即表示同意<text class="col4" @click="onSinglepage('service')">《用户服务协议》</text>和<text class="col4" @click="onSinglepage('secret')">《隐私政策》</text></view>
					
				</view>
		</view>
	</view>
</template>

<script>
	import multiSelect from '@/components/multi-select/multi-select.vue';
	var validate = require("../../xilu/validate.js");
	const app = getApp();
	export default {
		components:{
			multiSelect
		},
		data() {
			return {
				
				genders: [{id:1,name:'男'},{id:2,name:'女'}],
				areas:[],
				areaName: '',
				formData: {
					username: '',
					gender: 0,
					mobile: '',
					idcard: '',
					province_id: 0,
					city_id: 0,
					district_id: 0,
					address: ''
				},
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad(options) {
			this.$util.getAreasTree(false).then(areas=>{
				this.areas = areas;
			});
		},
		methods: {
			bindGenderChange(id){
				this.formData.gender = id;
			},
			bindDistrictsChange(event){
				this.areaName = event.items.map(item=>item.name).join(',');
				this.formData.province_id = event.items[0].id;
				this.formData.city_id = event.items[1].id;
				this.formData.district_id = event.items[2].id;
				this.$forceUpdate()
			},
			onSinglepage(type){
				uni.navigateTo({
					url: '/pages/public/singlepage?type='+type
				})
			},
			bindSubmit(event) {
				let data = this.formData;
				var rule = [
					{name: 'username',rules: ['require'],errorMsg: {require: '请填写姓名'}},
					{name: 'gender',rules: ['require','gt:0'],errorMsg: {require: '请选择性别',gt:'请选择性别'}},
					{name: 'mobile',rules: ['require','mobile'],errorMsg: {require: '请填写手机号',mobile:'请填写正确的手机号'}},
					{name: 'idcard',rules: ['require'],errorMsg: {require: '请填写身份证号'}},
					{name: 'district_id',rules: ['require','gt:0'],errorMsg: {require: '请填写所在区/县',gt: '请填写所在区/县'}},	
					{name: 'address',rules: ['require'],errorMsg: {require: '请填写详细地址'}}
				];
				// 是否全部通过，返回Boolean
				if (!validate.check(data, rule)) {
				    uni.showToast({title: validate.getError()[0],icon: 'none'});
				    return;
				}
			    this.$core.post({
			      url: 'xilujob.task/task_auth', data: data,
			      success: ret => {
			        uni.showModal({
			        	title: '提示',
						content: ret.msg,
						showCancel: false,
						success() {
							uni.navigateBack();
						}
			        })
			        
			      }
			    });
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		padding: 0 30rpx;

		.inp_item {
			height: 120rpx;

		}

		.inp_item+.inp_item {
			border-top: 1px solid #E7E7E7;
		}
	}

	.ico8 {
		width: 8rpx;
	}

	.box1 {
		width: 690rpx;
		padding: 10rpx 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;

		.inp_item+.inp_item {
			border-top: 1px solid #E7E7E7;
		}

		.inp_item {
			height: 110rpx;
		}

		.left {
			font-size: 30rpx;
			color: #333333;
		}

		.inp {
			text-align: right;
			padding-left: 30rpx;
			color: #333;
			font-size: 30rpx;
		}

		.switch {
			width: 122rpx;
			height: 53rpx;
			line-height: 53rpx;
			text-align: center;
			font-size: 30rpx;
			color: #666666;
			background: #EFF0F2;
			border-radius: 27rpx;

			&.ac {
				background: var(--primary);
				color: #FFFFFF;
			}
		}
	}

		.textarea{
			width: 100%;
			padding: 30rpx 0 0;
			font-size: 30rpx;
			color: #333333;
		}

	.btn {
		margin-top: 60rpx;
		width: 580rpx;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
		background: var(--primary);
		border-radius: 8rpx;
		margin-left: auto;
		margin-right: auto;
	}
.btn1{
	height: 82rpx;
	line-height: 82rpx;
	font-size: 30rpx;
}
</style>
